<template>
  <body>
    <div class="mine_box">
      <div v-if="userIfo" class="mine_top_box">
        <div class="mine_top" >
          <img
            src="https://m.9bianli.com/Images/jiubei.jpg"
            class="mine_top_tu"
            onerror="this.src='https://m.9bianli.com/Images/jiubei.jpg'"
          />
        </div>
        <div class="mine_set">
          <a href="SettingUp.aspx"><img src="https://m.9bianli.com/Images/center/shezhi.png" /></a>
        </div>
        <div class="mine">
          <div class="mine_head"></div>
          <div class="mine_bg">
            <!--未登录状态-->

            <div class="mine_bg_a">
              <div class="m_user">
                <a href="">
                  <img
                    src="https://m.9bianli.com/Images/jiubei.jpg"
                    class="head_tu"
                  />
                </a>
              </div>
              <div class="m_information">
                <div class="phone_number">{{userIfo.username}}</div>
                <div class="member_grade">
                  <span class="m_grade"> 新会员 </span>
                </div>
              </div>

              <span class="m_gift">
                <img src="https://m.9bianli.com/Images/center/center_srlb.png"
              /></span>
            </div>
          </div>
          <div
            class="mine_balance_cj"
            id="mine_balance"
            style="
              background-size: 100%;
              background-image: url('https://image.9bianli.com/Files/A01/Image/OtherResource/755985CA-5B48-4C91-91AB-776EB655BC2B.png');
              height: 73px;
            "
          >
          </div>
        </div>
        <div class="mine_redbag">
          <ul>
            <li>
              <a onclick=""
                ><span>
                  <img
                    src="https://m.9bianli.com/Images/center/center_hb.png"
                    class="m_img_icon" /><em id="hbcount"
                    >0</em
                  ><i class="m_db_new"></i><i class="m_coin m_add"></i
                ></span>
                <div class="m_font">我的红包</div>
              </a>
            </li>
            <li>
              <a href=""
                ><span style="margin-left: -15px">
                  <img
                    src="https://m.9bianli.com/Images/center/center_quan.png"
                    class="m_img_icon" /><em id="yhqcount">0</em
                  ><i class="m_db_new"></i><i class="m_coin m_add"></i
                ></span>
                <div class="m_font">我的优惠券</div>
              </a>
            </li>
          </ul>
        </div>

        <div class="national_top_coin"></div>

        <div class="mine_pay">
          余额<span class="mine_pay_balance">
            <span id="Amount">0.00</span>
          </span>
          <a
            href="/PrePayCard/PrePayCardReCharge.aspx"
            class="mine_pay_recharge"
            >充值&gt;</a
          >
        </div>

        <div class="mine_plus_box"></div>
      </div>
      <div v-else class="mine_top_box">
        <div class="mine_top" style="display: none">
          <h2>我的</h2>
        </div>
        <div class="mine_top" style="display: none">
          <img
            src="https://m.9bianli.com/Images/jiubei.jpg"
            class="mine_top_tu"
            onerror="this.src='https://m.9bianli.com/Images/jiubei.jpg'"
          />
          <h2>18323353423</h2>
        </div>
        <div class="mine_set">
          <a href=""><img src="https://m.9bianli.com/Images/center/shezhi.png" /></a>
        </div>
        <div class="mine">
          <div class="mine_head"></div>
          <div class="mine_bg">
            <!--未登录状态-->

            <div class="m_bg_login">
              <router-link to="/login">登陆</router-link
              ><span> | </span
              ><router-link to="/login">注册</router-link
              >
            </div>
          </div>
          <div
            class="mine_balance_cj"
            id="mine_balance"
            style="
              display: none;
              background-size: 100%;
              background-image: url('https://image.9bianli.com/Files/A01/Image/OtherResource/755985CA-5B48-4C91-91AB-776EB655BC2B.png');
              height: 73px;
            "
          >
            <!--class="mine_balance"-->
            <div class="m_b_box">
              <span class="m_plus">
                <img src="https://m.9bianli.com/Images/newphoto/mine_plus.png" /><span
                  class="m_plus_name"
                  >PLUS 会员</span
                ></span
              >
              <span class="m_plus_des">即将上线 敬请期待 &gt;</span>
            </div>
          </div>
        </div>
        <div class="mine_redbag">
          <ul>
            <li>
              <span>
                <img
                  src="https://m.9bianli.com/Images/center/center_hb.png"
                  class="m_img_icon" /><i class="mine_fuhao"></i
              ></span>
              <div class="m_font">我的红包</div>
            </li>
            <li>
              <span style="margin-left: -15px">
                <img
                  src="https://m.9bianli.com/Images/center/center_quan.png"
                  class="m_img_icon" /><i class="mine_fuhao"></i
              ></span>
              <div class="m_font">我的优惠券</div>
            </li>
          </ul>
        </div>

        <div class="national_top_coin"></div>

        <div class="mine_pay">
          余额<span class="mine_pay_balance">
            <i class="mine_fuhao" style="margin-top:0"></i>
          </span>
          <a
            href=""
            class="mine_pay_recharge"
            >充值&gt;</a
          >
        </div>

        <div class="mine_plus_box"></div>
      </div>
      <div class="mine_order_box" style="display: block">
        <div id="mine_order" v-if="userIfo" class="mine_order_no_plus">               
          <div class="order_swiper">
          <div class="swiper-container order-container swiper-container-vertical swiper-container-ios">
              <div class="swiper-wrapper">
                      <div class="swiper-slide swiper-slide-active" style="height: 70px;">
                          <div class="oc_img">
                              <i class="order_coin coin_noOrder"></i>
                          </div>
                          <div class="oc_details">
                              <div class="m_o_info_top" style="margin-top:8px;">暂无订单，请选购商品</div>
                          </div>
                      </div>
              </div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
          </div>
          </div>            
          <div class="m_o_all">
            <i class="m_o_all_icon"></i>
            <span id="allOrder">全部订单&nbsp;<img src="https://m.9bianli.com/Images/center/order_more.png" class="jiantou">
            <i class="allorder_coin"></i></span>
          </div>
        </div>
        <div  id="mine_order" v-else class="mine_order_no_plus">
          <div class="m_o_nologin">登录后可查看订单</div>

          <div class="m_o_all">
            <i class="m_o_all_icon"></i>
            <span id="allOrder"
              >全部订单&nbsp;<img
                src="https://m.9bianli.com/Images/center/order_more.png"
                class="jiantou"
              />
            </span>
          </div>
        </div>
      </div>
      <div style="background-color: #fff" id="common_functions">
        <div class="tg_title">常用功能</div>
        <div class="mine_nav_box">
          <div class="m_nav">
            <router-link to="/address">
              <img src="https://m.9bianli.com/Images/center/icon_shdz.png" style="" />
              <span class="m_coin">收货地址</span>
            </router-link>
          </div>
          <div class="m_nav">
           <router-link to="/collection">
              <img src="https://m.9bianli.com/Images/center/icon_wdsc.png" style="" />
              <span class="m_coin">我的收藏</span>
              </router-link>
          </div>
          <div class="m_nav">
            <a href="">
              <img src="https://m.9bianli.com/Images/center/icon_lqzx.png" style="" />
              <span class="m_coin">领券中心</span></a
            >
          </div>
          <div class="m_nav">
            <a href="">
              <img src="https://m.9bianli.com/Images/center/icon_wdqg.png" style="" />
              <span class="m_coin">我的抢购</span>
            </a>
          </div>
        </div>
        <div class="mine_nav_box" style="display: table">
          <div class="m_nav">
            <router-link to="/about">
              <img src="https://m.9bianli.com/Images/center/icon_gy.png" style="" />
              <span class="m_coin">关于酒便利</span>
            </router-link>
          </div>

          <div class="m_nav">
            <a href="">
              <img src="https://m.9bianli.com/Images/center/icon_kfrx.png" style="" />
              <span class="m_coin">01050951700</span>
            </a>
          </div>
          <div class="m_nav">
            <a href="">
              <img src="https://m.9bianli.com/Images/center/icon_yjfk.png" style="" />
              <span class="m_coin">意见反馈</span>
            </a>
          </div>
        </div>
      </div>

      <div class="tg_goods">
        <div class="tg_title ins">
          <img src="https://m.9bianli.com/Images/newphoto/guess_like.png" />
        </div>
        <div class="tg_box">
          <div class="tg_item">
            <a href="">
              <div class="tg_i_tu">
                <img
                  src="https://image.9bianli.com/Files/A01/Image/ProductResource/CBA62A58-111B-4647-BB88-3EEF7C89C635_420_420.jpg"
                  onerror='this.src="/Images/nofound.png"'
                />
              </div>
              <div class="tg_i_m">
                <div class="tg_i_t">52%vol剑南春500ml</div>
                <div class="tg_i_money">
                  <span class="tg_i_c">¥</span
                  ><span class="guess_like_price">458</span
                  ><span class="guess_lp_del">.00</span>
                </div>
              </div>
            </a>
          </div>

          <div class="tg_item">
            <a href="">
              <div class="tg_i_tu">
                <img
                  src="https://image.9bianli.com/Files/A01/Image/ProductResource/F088485B-C756-43A9-BA90-5424C613C198_420_420.jpg"
                  onerror='this.src="/Images/nofound.png"'
                />
              </div>
              <div class="tg_i_m">
                <div class="tg_i_t">52°泸州老窖特曲500ml</div>
                <div class="tg_i_money">
                  <span class="tg_i_c">¥</span
                  ><span class="guess_like_price">288</span
                  ><span class="guess_lp_del">.00</span>
                </div>
              </div>
            </a>
          </div>

          <div class="tg_item">
            <a href="">
              <div class="tg_i_tu">
                <img
                  src="https://image.9bianli.com/Files/A01/Image/ProductResource/076F137E-D446-4B5D-8AAF-BC61EDDA6176_420_420.jpg"
                  onerror='this.src="/Images/nofound.png"'
                />
              </div>
              <div class="tg_i_m">
                <div class="tg_i_t">53°老白汾酒特制 (10) 475ml</div>
                <div class="tg_i_money">
                  <span class="tg_i_c">¥</span
                  ><span class="guess_like_price">169</span
                  ><span class="guess_lp_del">.00</span>
                </div>
              </div>
            </a>
          </div>

          <div class="tg_item">
            <a href="">
              <div class="tg_i_tu">
                <img
                  src="https://image.9bianli.com/Files/A01/Image/ProductResource/1D5BE270-38F1-4122-A556-CDCD9F003E20_420_420.jpg"
                  onerror='this.src="/Images/nofound.png"'
                />
              </div>
              <div class="tg_i_m">
                <div class="tg_i_t">36°牛栏山百年陈酿400ml</div>
                <div class="tg_i_money">
                  <span class="tg_i_c">¥</span
                  ><span class="guess_like_price">120</span
                  ><span class="guess_lp_del">.00</span>
                </div>
              </div>
            </a>
          </div>

          <div class="tg_item">
            <a href="">
              <div class="tg_i_tu">
                <img
                  src="https://image.9bianli.com/Files/A01/Image/ProductResource/159E69CA-936A-4C6B-AC87-8FE65DC58420_420_420.jpg"
                  onerror='this.src="/Images/nofound.png"'
                />
              </div>
              <div class="tg_i_m">
                <div class="tg_i_t">50°汾阳王青花10 500ml</div>
                <div class="tg_i_money">
                  <span class="tg_i_c">¥</span
                  ><span class="guess_like_price">98</span
                  ><span class="guess_lp_del">.00</span>
                </div>
              </div>
            </a>
          </div>

          <div class="tg_item">
            <a href="">
              <div class="tg_i_tu">
                <img
                  src="https://image.9bianli.com/Files/A01/Image/ProductResource/96EE3FE5-6F3D-4A25-9D1A-96EF92A86626_420_420.jpg"
                  onerror='this.src="/Images/nofound.png"'
                />
              </div>
              <div class="tg_i_m">
                <div class="tg_i_t">獭祭45清酒（纯米大吟酿）720ml</div>
                <div class="tg_i_money">
                  <span class="tg_i_c">¥</span
                  ><span class="guess_like_price">418</span
                  ><span class="guess_lp_del">.00</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
export default {
    data(){
      return{
          userIfo:null
      }
    },
    created () {
      this.userIfo= this.$store.state.user.userIfo;
      console.log(this.userIfo)
    },
};
</script>

<style lang="cass" scoped
src="../assets/css/my.css"></style>
<style lang="cass" scoped
src="../assets/css/my2.css"></style>
<style lang="cass" scoped
src="../assets/css/my3.css"></style>
<style lang="cass" scoped
src="../assets/css/reset.css"></style>